<template>
    <div>

        <div id="large-header" class="large-header login-page">
			<canvas id="demo-canvas" width="1590" height="711"></canvas>
			<div class="login-form">
				<div class="login-content">
					<!-- 标题 -->
					<h1 class="title_name">账户登录</h1>
					<form method="post" role="form" id="form_login" class="login_padding">
						<div class="form-group clearfix">

							<div class="input-group">
								<!-- <div class="input-group-addon">
									<i class="icon_user"></i>
								</div> -->
								<!-- 手机输入框 -->
								<input type="text" class="form-control" name="username" id="username" placeholder="账号" autocomplete="off" v-model="loginId">
							</div>
						</div>

						<div class="form-group clearfix">

							<div class="input-group">


								<input type="password" class="form-control" name="password" id="password" placeholder="密码" autocomplete="off" v-model="loginPassword">
							</div>

						</div>


						<div class=" textright">
                            <!-- <a href="/forgetPwd" class="forget">忘记密码？</a> -->
                            <router-link to="/forgetPwd" tag="a" class="forget">忘记密码？</router-link>
                        </div>

						<div class="form-group">
							<a href="javascript:;" type="submit" class="btn btn-danger btn-block btn-login login" @click="login">
								<i class="fa fa-sign-in"></i>
								登录
							</a>
						</div>

						<div class=" textright">
                            <router-link to="/register" tag="a">立即注册</router-link>
                            <!-- <a href="/register" class="forget">立即注册</a> -->
                        </div>

					</form>
				</div>
			</div>
		</div>
        


    </div>
</template>

<script>
import { Message } from 'element-ui';
// import 'bootstrap/dist/css/bootstrap.min.css'
import "../../../assets/login/css.css"

export default {
    data () {
      return {
          showcon:'',
          loginUrl:this.pathUrl.loginUrl,
        //   loginUrl:"http://localhost:3003/api/user/login",
          loginId:'',
          loginPassword:'',
      }
    },

    methods: {
        open2(message) {
                this.$message({
                showClose: true,
                message,
                type: 'success',
                duration:1500,
                });
            },
            
        open4(message) {
                this.$message({
                showClose: true,
                message: message,
                type: 'error',
                duration:1500,
                });
            },


        // 登录，访问路径进行登录
        login(){
            this.$axios.post(this.loginUrl,{
                        loginId:this.loginId,loginPassword:this.loginPassword
                })
            .then((resule)=>{
                // resule=JSON.parse(resule);
                var user=resule.data.resule[0];
                console.log(resule)

                if(typeof(user)!='undefined'){//账号查找到

                    if(typeof (this.loginId) != 'undefined'){//判断账号存在
  
                        if(typeof(this.loginPassword) == 'undefined'){//判断是否输入密码
                            this.open4("请输入密码")

                        }
                        else if(this.loginPassword!=user.loginPassword){//判断是否密码错误
                            this.open4("密码错误")

                        };                                               
                    }
                    else{
                        this.open4("账号不存在")

                    }


                    if(this.loginPassword==user.loginPassword && this.loginId==user.loginId){//全部排查，成功
                        this.open2("登录成功")
                        localStorage.getItem("token",resule.data.token)
                        localStorage.setItem('user',JSON.stringify(user));
                        this.$router.push({path:'/blog/index'})
                    }
                    // if(this.)
                }
                else{
                    this.open4("账号查找不到")

                }

            })
        },

	},
	created:function(){
		
	},
	mounted:function(){
		require('../../../assets/login/jquery-1.11.0.min.js');
        require ('../../../assets/login/demo-1.js');
        console.log(this.loginPassword)
        

	},
    components: {},
}
</script>

<style scoped>
h1{
    font-size: 30px;
}


.large-header {

    position: relative;
    width: 100%;
    background:url(../../../assets/images/bg.jpg) no-repeat;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}
.logobg_style  {
    position: absolute;
    top: 50%;
    font-family: "微软雅黑", Microsoft YaHei UI;
    margin-top: -225px;
    margin-left: -200px;
    left: 50%;
    z-index: 999;
    -webkit-transition: all 550ms ease-in-out;
    -moz-transition: all 550ms ease-in-out;
    -o-transition: all 550ms ease-in-out;
    transition: all 550ms ease-in-out;
}
.login-content {
    position: relative;
    width: 400px;
    z-index: 999;
    height: 380px;
    box-shadow: 0px 3px 6px #333333;
    background: url(../../../assets/images/bg_03.png) repeat;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 0;
    -webkit-transition: all 550ms ease-in-out;
    -moz-transition: all 550ms ease-in-out;
    -o-transition: all 550ms ease-in-out;
    transition: all 550ms ease-in-out;
}
.title_name {
    color: #ffffff;
    font-weight: bold;
}
.login_padding {
    padding: 15px 40px;
    position: relative;
}
.logobg_style .form-group {
    margin-bottom: 25px;
    display: block;
}
.logobg_style .input-group {
    height: 45px;
    float: left;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.login-form {
    position: absolute;
    top: 50%;
    font-family: "微软雅黑", Microsoft YaHei UI;
    margin-top: -225px;
    margin-left: -200px;
    left: 50%;
    z-index: 999;
    -webkit-transition: all 550ms ease-in-out;
    -moz-transition: all 550ms ease-in-out;
    -o-transition: all 550ms ease-in-out;
    transition: all 550ms ease-in-out;
}
.textright {
    height: 35px;
    text-align: right;
}
</style>